<template>
  <div class="met-showproduct-body" :style="{backgroundColor:app_tabBar.config.bodybgcolor}">
    <div class="head">
      <div class="img-list">
        <swiper :show-dots="false" :loop="true" ref="swiper" v-model="swiperIndex">
          <swiper-item v-for="item in product_view.displayimg" :key="item.id">
            <img :src="item.url" class="slide-image" ref="productView_img"/>
          </swiper-item>
        </swiper>
      </div>
      <div class="img-dots">
        <div class="list">
          <div class="item" v-for="(item,dotIndex) in product_view.displayimg" :key="item.id" @click="changeSwiper(dotIndex)" :class="{active:dotIndex===swiperIndex}">
            <img :src="item.url" class="dots-image" />
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title" :style="{color:app_tabBar.config.firstcolor}">{{product_view.title}}</div>
        <div class="desc" :style="{color:app_tabBar.config.secondcolor}">{{product_view.description}}</div>
        <div class="para">
          <ul class="ul">
            <li v-for="item in product_view.para" :key="item.id" class="li" :style="{color:app_tabBar.config.secondcolor}">
              <span>{{item.name}} : {{item.value}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="met_tab">
        <div class="met_tab_head">
          <div v-for="(item,index) in product_view.tab" :key="item.id ">
            <div class="name" @click="handleChange(index)"  :style="{color: activeTab===index ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor,borderColor:activeTab===index?app_tabBar.config.thirdcolor:''}">{{item.tab_name}}</div>
          </div>
        </div>
        <div class="met_tab_content">
          <div v-for="(item,contentIndex) in product_view.tab" :key="item.id ">
            <div v-show="activeTab===contentIndex">
              <div v-html="item.content" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <sidebar></sidebar>
  </div>
</template>
<script>
import Sidebar from '@/components/common/Sidebar'
import { mapGetters } from 'vuex'
export default {
  components: {
    Sidebar
  },
  computed: {
    ...mapGetters(['product_view','app_tabBar'])
  },
    mounted() {
    const img = this.$refs.productView_img[0]
    img.onload = () => {
      this.$refs.swiper.xheight = img.height  + 'px'
    }
  },
  data() {
    return {
      activeTab: 0,
      swiperIndex: 0
    }
  },
  methods: {
    handleChange(index) {
      this.activeTab = index
    },
    imageChange(e) {
      this.current = e.mp.detail.current
    },
    changeSwiper(index) {
      this.swiperIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.met-showproduct-body {
  .head {
    padding: 15px;
    margin-bottom: 15px;
    .img-dots {
      margin-top: 15px;
      .list {
        display: flex;
        flex-direction: row;
        height: 64px;
        justify-content: center;
        overflow-x: auto;
      }
      .item {
        width: 64px;
        border: 2px solid #eee;
        margin: 0 5px;
        transition: border 0.3s ease;
        &.active {
          border-color: #444;
        }
      }
      .dots-image {
        width: 60px;
        height: 60px;
        object-fit: cover;
      }
    }
    .info {
      margin-top: 15px;
      .title {
        font-size: 24px;
        color: #444;
        margin-bottom: 15px;
      }
      .desc {
        color: #848484;
        font-size: 16px;
        margin-bottom: 15px;
      }
      .para {
        .ul {
          display: flex;
          flex-wrap: wrap;
        }
        .li {
          width: 50%;
          font-size: 14px;
          color: #848484;
          margin-bottom: 15px;
          overflow: hidden;
        }
      }
    }
  }
  .content {
    padding: 15px;

    margin-bottom: 15px;
    .met_tab {
      .met_tab_head {
        display: flex;
        border-bottom: 1px solid #dcdcdc;
        overflow-y: auto;
        .name {
          padding: 5px 10px;
          font-size: 14px;
          margin-right: 15px;
          white-space: nowrap;
          &.active {
            border-bottom: 2px solid #000;
          }
        }
      }
      .met_tab_content {
        padding: 30px 0;
      }
    }
  }
}
</style>